<template>
  <div class="box"></div>
  <img alt="" />
  <!-- src="https://yanxuan-item.nosdn.127.net/46898c7fa475dbfc89dac2f7e7c2c16f.jpg" -->
</template>

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    // const img = ref(null)
    onMounted(() => {
      const img = document.querySelector('img')
      // 如何知道img是否在可视区
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          // console.log(isIntersecting)
          if (isIntersecting) {
            img.src =
              'https://yanxuan-item.nosdn.127.net/46898c7fa475dbfc89dac2f7e7c2c16f.jpg'
            observer.unobserve(img)
          }
        },
        {
          threshold: 0
        }
      )
      observer.observe(img)
    })
  }
}
</script>

<style scoped>
.box {
  width: 100px;
  height: 1000px;
  background-color: pink;
}
</style>
